<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部按钮 -->
        <el-row type='flex' justify='end' style="margin-bottom:10px">
          <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('new')" >新增试题</el-button>
        </el-row>
      <!-- 筛选 -->
      <el-form label-width="80px" size="small" ref="formRef">
      <el-row :gutter="20">
      <!-- 学科 -->
          <el-col :span="6">
           <el-form-item label="学科">
            <el-select  placeholder="请选择" v-model="questions.subjectID" @change="changeSubject">
              <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
          <!-- 二级目录 -->
            <el-col :span="6">
           <el-form-item label="二级目录">
            <el-select  placeholder="请选择" v-model="questions.catalogID">
              <el-option
               v-for="item in directoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
            <!-- 标签 -->
            <el-col :span="6">
           <el-form-item label="标签">
            <el-select  placeholder="请选择" v-model="questions.tags">
              <el-option
               v-for="item in tagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
             <!-- 关键字 -->
            <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="questions.keyword"></el-input>
            </el-form-item>
          </el-col>
                  <!-- 试题类型 -->
            <el-col :span="6">
           <el-form-item label="试题类型">
            <el-select  placeholder="请选择" v-model="questions.questionType">
              <el-option
              questionTypeOptions
               v-for="item in questionTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
                 <!-- 难度 -->
            <el-col :span="6">
           <el-form-item label="难度">
            <el-select  placeholder="请选择" v-model="questions.difficulty">
              <el-option
              v-for="item in diffOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
                 <!-- 方向 -->
            <el-col :span="6">
           <el-form-item label="方向" >
            <el-select  placeholder="请选择" v-model="questions.direction">
              <el-option
               v-for="item in directionOptions"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
                 <!-- 录入人 -->
            <el-col :span="6">
           <el-form-item label="录入人">
            <el-select  placeholder="请选择" v-model="questions.creatorID">
              <el-option
              v-for="item in userOptions"
              :key="item.id"
              :label="item.username"
              :value="item.id"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
     <!-- 题目备注 -->
            <el-col :span="6">
           <el-form-item label="题目备注">
            <el-input v-model="questions.remarks"/>
           </el-form-item>
          </el-col>
          <!-- 企业简称 -->
            <el-col :span="6">
           <el-form-item label="企业简称">
            <el-input v-model="questions.shortName"/>
           </el-form-item>
          </el-col>
                       <!-- 城市 -->
            <el-col :span="6">
           <el-form-item label="城市" >
            <el-select
            placeholder="请选择"
            v-model="questions.province"
            @change="handleCity"
            style="width:48%;margin-right:5px">
              <el-option
               v-for="item in cityOptions"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
            <!-- 地区 -->
             <el-select  placeholder="请选择" style="width:48%" v-model="questions.city">
              <el-option
               v-for="item in areaOptions"
              :key="item"
              :label="item"
              :value="item"
              ></el-option>
            </el-select>
           </el-form-item>
          </el-col>
                   <!-- button按钮 -->
            <el-col :span="6">
        <div style="text-align:right">
          <el-button type="success" @click="clear">清除</el-button>
          <el-button type="primary" @click="search()">搜索</el-button>
        </div>
          </el-col>
      </el-row>
       </el-form>
      <!-- 数据多少条信息 -->
          <el-alert
            :title="`数据一共${total}条`"
            type="info"
            show-icon
            :closable=false
            style="margin-bottom:20px"
            >
          </el-alert>
          <!-- 表格信息 -->
          <el-table stripe border :data="tableData">
            <el-table-column label="试题编号" prop="number"></el-table-column>
            <el-table-column label="学科" prop="subject"></el-table-column>
            <el-table-column label="目录" prop="catalog"></el-table-column>
            <el-table-column label="题型" prop="questionType" :formatter="formatterTopic">
            </el-table-column>
            <el-table-column label="题干" prop='question'>
                <template #default='{row}'>
                  <div v-html="row.question">
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="录入时间" prop="addDate">
              <!-- 时间格式化处理 -->
              <template #default='{row}'>{{row.addDate | formatDate("YYYY-MM-DD HH:mm:ss")}}</template>
            </el-table-column>
            <el-table-column label="难度" prop="difficulty" :formatter="formatterDifficulty"></el-table-column>
            <el-table-column label="录入人" prop="creator"></el-table-column>
            <el-table-column label="操作" width="200px">
              <template #default='{row}'>
                 <el-row>
                  <!-- 查看 -->
                  <el-button icon="el-icon-view" circle plain @click.native="openVisible(row)"></el-button>
                  <!-- 编辑 -->
                  <el-button type="primary" icon="el-icon-edit" circle plain @click="$router.push(`new?id=${row.id}`)"></el-button>
                  <!-- 删除 -->
                  <el-button type="success" icon="el-icon-delete" circle plain @click="delsubject(row)"></el-button>
                  <!-- 加入精选题库 -->
                  <el-button type="warning" icon="el-icon-check" circle plain @click="joinSelected(row)"></el-button>
                 </el-row>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
    <el-row type='flex' justify='end'>
        <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="questions.page"
          :page-sizes="[2,5, 10, 15, 20]"
          :page-size="questions.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
          >
        </el-pagination>
    </el-row>
      </el-card>
      <!-- 对话框 -->
     <DiaLog :dialogVisible.sync='dialogVisible' :subject='subject'></DiaLog>
    </div>
  </div>
</template>

<script>
import { list, choiceAdd, remove } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/base/users'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
// 题型处理
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { citys, provinces } from '@/api/hmmm/citys'
import DiaLog from '../components/DiaLog.vue'

export default {
  components: { DiaLog },
  name: 'Questions',
  data() {
    return {
      tableData: [], // 表格信息
      total: 0, // 总条数
      questions: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 题型
        tags: null, // 试题标签
        province: null, // 省份
        city: null, // 城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        page: 1, // 页码
        pagesize: 5 // 每页条数
      },
      // 学科选项
      subjectOptions: [],
      // 难度选项
      diffOptions: difficulty,
      // 试题类型选项
      questionTypeOptions: questionType,
      // 标签选项
      tagOptions: [],
      // 城市
      cityOptions: provinces(),
      // 地区 当选择了城市的时候赋值
      areaOptions: [],
      // 方向选项
      directionOptions: direction,
      // 录入人
      userOptions: [],
      // 目录
      directoryOptions: [],
      dialogVisible: false, // 对话框默认关闭
      subject: {} // 个人信息
    }
  },
  created() {
    // 列表渲染
    this.getList()
    // 学科数据
    this.subjectList()
    // 用户信息
    this.userList()
  },
  methods: {
    // 题型数据渲染
    formatterTopic(row, column, cellValue, index) {
      const obj = questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 难度数据渲染
    formatterDifficulty(row, column, cellValue, index) {
      const obj = difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },

    // 获取表格列表
    async getList() {
      const res = await list(this.questions)
      console.log(res)
      this.tableData = res.data.items // 表格每一项
      this.total = res.data.counts // 总条数
    },
    // 获取学科简单列表
    async  subjectList() {
      const { data } = await simple()
      // console.log(data)
      this.subjectOptions = data
    },
    // 获取录入人
    async userList() {
      const { data } = await simples()
      // console.log(data)
      this.userOptions = data
    },
    // 每页条数发生变化
    handleSizeChange(val) {
      this.questions.page = 1
      this.questions.pagesize = val
      // 重新渲染
      this.getList()
    },
    // 当前页
    handleCurrentChange(val) {
      this.questions.page = val
      // 重新渲染
      this.getList()
    },
    // 学科数据改变时
    async changeSubject(id) {
      // 清空数据
      this.questions.catalogID = null
      this.questions.tags = null
      if (id) {
        // 获取目录信息
        const { data } = await directorysSimple({ id })
        this.directoryOptions = data
        // 获取标签信息
        const { data: tagslist } = await tagsSimple({ id })
        this.tagOptions = tagslist
      } else {
        // 没有id重置表单
        this.directoryOptions = []
        this.tagOptions = []
      }
    },
    // 城市切换时
    handleCity(val) {
      // console.log(val)
      // 清空地区值
      this.questions.city = null
      // 给地区添加对应的值
      this.areaOptions = citys(val)
    },
    // 重置表单
    clear() {
      // 重置表单数据
      this.questions = {}
      this.getList()
    },
    // 点击搜索
    search() {
      this.questions.page = 1
      // 重新渲染
      this.getList()
    },
    // 加入精选题库
    joinSelected(data) {
      this.$confirm('是否加入精选, 是否继续?', '提示', {
        type: 'warning'
      }).then(async() => {
        await choiceAdd({ id: data.id, choiceState: 1 })
        // 重新渲染
        this.getList()
        this.$message.success('加入精选成功!')
      }).catch(() => {
        this.$message.info('已取消加入')
      })
    },
    // 删除数据
    delsubject(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.$message.success('删除成功!')
        await remove(row)
        // 重新渲染
        this.getList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 打开对话框
    openVisible(value) {
      this.subject = value
      this.dialogVisible = true
    }

  }

}
</script>

<style scoped>

</style>
